Skip to content

Commit

Permalink
Merge pull request #379 from minelminel/Feature/custom-branding
Browse files Browse the repository at this point in the history
Feature/custom branding
  • Loading branch information
mircealungu committed Apr 1, 2021
2 parents 864b7ee + 578f63b commit b83fb3b
Show file tree
Hide file tree
Showing 7 changed files with 200 additions and 108 deletions.
7 changes: 6 additions & 1 deletion config.cfg
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,11 @@ BLUEPRINT_NAME=dashboard
CUSTOM_LINK=dashboard
MONITOR_LEVEL=1
OUTLIER_DETECTION_CONSTANT=2.5
BRAND_NAME=Flask Monitoring Dashboard
TITLE_NAME=Flask-MonitoringDashboard
DESCRIPTION=Automatically monitor the evolving performance of Flask/Python web services
SHOW_LOGIN_BANNER=True
SHOW_LOGIN_FOOTER=True

[authentication]
USERNAME=admin
Expand All @@ -19,4 +24,4 @@ DATABASE=sqlite:////<path to your project>/dashboard.db
[visualization]
TIMEZONE=Europe/Amsterdam
COLORS={'main':'[0,97,255]',
'static':'[255,153,0]'}
'static':'[255,153,0]'}
18 changes: 18 additions & 0 deletions docs/configuration.rst
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,11 @@ file that contains the entry point of the app. The following properties can be c
OUTLIER_DETECTION_CONSTANT=2.5
SAMPLING_PERIOD=20
ENABLE_LOGGING=True
BRAND_NAME=Flask Monitoring Dashboard
TITLE_NAME=Flask-MonitoringDashboard
DESCRIPTION=Automatically monitor the evolving performance of Flask/Python web services
SHOW_LOGIN_BANNER=True
SHOW_LOGIN_FOOTER=True
[authentication]
USERNAME=admin
Expand Down Expand Up @@ -103,6 +108,19 @@ Dashboard
- **ENABLE_LOGGING:** Boolean if you want additional logs to be printed to the console. Default
value is False.

- **BRAND_NAME:** The name displayed in the Dashboard Navbar. Default value is 'Flask Monitoring Dashboard'.

- **TITLE_NAME:** The name displayed in the browser tab. Default value is 'Flask-MonitoringDashboard'.

- **DESCRIPTION:** The text displayed in center of the Dashboard Navbar. Default value is
'Automatically monitor the evolving performance of Flask/Python web services'.

- **SHOW_LOGIN_BANNER:** Boolean if you want the login page to show the 'Flask Monitoring Dashboard' logo and title.
Default value is True.

- **SHOW_LOGIN_FOOTER:** Boolean if you want the login page to show a link to the official documentation.
Default value is True.

Authentication
~~~~~~~~~~~~~~

Expand Down
20 changes: 20 additions & 0 deletions flask_monitoringdashboard/core/config/__init__.py
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,11 @@ def __init__(self):
self.outlier_detection_constant = 2.5
self.sampling_period = 5 / 1000.0
self.enable_logging = False
self.brand_name = 'Flask Monitoring Dashboard'
self.title_name = 'Flask-MonitoringDashboard'
self.description = 'Automatically monitor the evolving performance of Flask/Python web services'
self.show_login_banner = True
self.show_login_footer = True

# database
self.database_name = 'sqlite:///flask_monitoringdashboard.db'
Expand Down Expand Up @@ -75,6 +80,16 @@ def init_from(self, file=None, envvar=None, log_verbose=False):
If this value is not set, the profiler continuously monitors.
- ENABLE_LOGGING: Boolean if you want additional logs to be printed to the console.
Default value is False
- BRAND_NAME: The name displayed in the Dashboard Navbar.
Default value is 'Flask Monitoring Dashboard'
- TITLE_NAME: The name displayed in the browser tab.
Default value is 'Flask-MonitoringDashboard'
- DESCRIPTION: The text displayed in center of the Dashboard Navbar.
Default value is 'Automatically monitor the evolving performance of Flask/Python web services'
- SHOW_LOGIN_BANNER: Boolean if you want the login page to show the 'Flask Monitoring Dashboard' logo and title.
Default value is True
- SHOW_LOGIN_FOOTER: Boolean if you want the login page to show a link to the official documentation.
Default value is True
The config_file must at least contains the following variables in section
'authentication':
Expand Down Expand Up @@ -138,6 +153,11 @@ def init_from(self, file=None, envvar=None, log_verbose=False):
self.enable_logging = parse_bool(
parser, 'dashboard', 'ENABLE_LOGGING', self.enable_logging
)
self.brand_name = parse_string(parser, 'dashboard', 'BRAND_NAME', self.brand_name)
self.title_name = parse_string(parser, 'dashboard', 'TITLE_NAME', self.title_name)
self.description = parse_string(parser, 'dashboard', 'DESCRIPTION', self.description)
self.show_login_banner = parse_bool(parser, 'dashboard', 'SHOW_LOGIN_BANNER', self.show_login_banner)
self.show_login_footer = parse_bool(parser, 'dashboard', 'SHOW_LOGIN_FOOTER', self.show_login_footer)

# parse 'authentication'
self.username = parse_string(parser, 'authentication', 'USERNAME', self.username)
Expand Down
137 changes: 75 additions & 62 deletions flask_monitoringdashboard/templates/fmd_base.html
Original file line number Diff line number Diff line change
@@ -1,76 +1,89 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en" ng-app="fmdApp">
<head>
<title>Flask-MonitoringDashboard</title>
<base href="{{ url_for(blueprint_name + '.index') }}">
<meta charset="utf-8">
<head>
<title>{{ title_name }}</title>
<base href="{{ url_for(blueprint_name + '.index') }}" />
<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>

<link rel="stylesheet"
href="{{ url_for(blueprint_name + '.static', filename='css/app.css') }}"/>
<link
rel="stylesheet"
href="{{ url_for(blueprint_name + '.static', filename='css/app.css') }}"
/>

<link rel="shortcut icon"
href="{{ url_for(blueprint_name + '.static', filename='img/favicon.ico') }}"/>
</head>
<link
rel="shortcut icon"
href="{{ url_for(blueprint_name + '.static', filename='img/favicon.ico') }}"
/>
</head>

{% block body %}
<body class="fixed-nav sticky-footer bg-dark" id="page-top">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
<div class="navbar-brand brand-plain">
<a href="overview"><h4>Flask Monitoring Dashboard</h4></a>
</div>
{% block body %}
<body class="fixed-nav sticky-footer bg-dark" id="page-top">
<nav
class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top"
id="mainNav"
>
<div class="navbar-brand brand-plain">
<a href="overview"><h4>{{ brand_name }}</h4></a>
</div>

<div class="collapse navbar-collapse" id="navbarResponsive">
<menu></menu>
<ul class="navbar-nav sidenav-toggler">
<li class="nav-item">
<a class="nav-link text-center" id="sidenavToggler">
<i class="fa fa-fw fa-angle-left"></i>
</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<span style="color: #adb5bd;">
Automatically monitor the evolving performance of Flask/Python web services
</span>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" data-toggle="modal" data-target="#logoutModal">
<i class="fas fa-sign-out-alt"></i>Logout</a>
</li>
</ul>
</div>
<div class="collapse navbar-collapse" id="navbarResponsive">
<menu></menu>
<ul class="navbar-nav sidenav-toggler">
<li class="nav-item">
<a class="nav-link text-center" id="sidenavToggler">
<i class="fa fa-fw fa-angle-left"></i>
</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<span style="color: #adb5bd"> {{ description }} </span>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" data-toggle="modal" data-target="#logoutModal">
<i class="fas fa-sign-out-alt"></i>Logout</a
>
</li>
</ul>
</div>
</nav>

<div class="content-wrapper">
<div class="container page">
<div id="content" class="main" ng-view></div>
<div class="container page">
<div id="content" class="main" ng-view></div>
</div>
<footer class="sticky-footer">
<div class="container">
<div class="text-center">
Click
<a
target="_blank"
href="http://flask-monitoringdashboard.readthedocs.io"
>here</a
>
to read advanced documentation.
</div>
</div>
<footer class="sticky-footer">
<div class="container">
<div class="text-center">
Click <a target="_blank"
href="http://flask-monitoringdashboard.readthedocs.io">here</a>
to read advanced documentation.
</div>
</div>
</footer>
</footer>

<modal name="'logout'" title="'Logout?'">
<p>Are you sure you want to logout?</p>
</modal>
<modal name="'logout'" title="'Logout?'">
<p>Are you sure you want to logout?</p>
</modal>
</div>
{% endblock %}
{% endblock %}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular-route.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.12.0/d3.min.js"></script>
<script src="https://unpkg.com/sunburst-chart"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular-route.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.12.0/d3.min.js"></script>
<script src="https://unpkg.com/sunburst-chart"></script>

<script src="{{ url_for(blueprint_name + '.static', filename='js/app.js') }}"></script>
</body>
</html>
<script src="{{ url_for(blueprint_name + '.static', filename='js/app.js') }}"></script>
</body>
</html>
113 changes: 70 additions & 43 deletions flask_monitoringdashboard/templates/fmd_login.html
Original file line number Diff line number Diff line change
@@ -1,54 +1,81 @@
{% extends "fmd_base.html" %}
{% block body %}
{% extends "fmd_base.html" %} {% block body %}

<body>
<div class="container py-5">
<div class="row">
<div class="col-md-8 offset-md-2">

<div class="text-center" style="margin-bottom: 20px; margin-top: -30px;">
<div style="text-align: center;">
<img src="{{ url_for(blueprint_name + '.static', filename='img/header.png') }}" width="80%" />
</div>
<span>Automatically monitor the evolving performance of Flask/Python web services</span>
</div>
</div>
<div class="container py-5">
{% if show_login_banner %}
<div class="row">
<div class="col-md-8 offset-md-2">
<div class="text-center" style="margin-bottom: 20px; margin-top: -30px">
<div style="text-align: center">
<img
src="{{ url_for(blueprint_name + '.static', filename='img/header.png') }}"
width="80%"
/>
</div>
<span
>Automatically monitor the evolving performance of Flask/Python web
services</span
>
</div>
</div>
</div>
{% endif %}

<div class="row">
<div class="col-md-4 offset-md-4">
<span class="anchor" id="formLogin"></span>
<div class="card card-outline-secondary">
<div class="card-header">
<h5>Login</h5>
</div>

<div class="card-body">
<form class="form" method="POST" action="login">
<div class="form-group">
<label for="formName"><i class="fa fa-user"></i> Login</label>
<input id="formName" name="name" type="text" class="form-control" placeholder="Username"
autofocus required />
</div>
<div class="row">
<div class="col-md-4 offset-md-4">
<span class="anchor" id="formLogin"></span>
<div class="card card-outline-secondary">
<div class="card-header">
<h5>Login</h5>
</div>

<div class="form-group">
<label for="formPassword"><i class="fa fa-lock"></i> Password</label>
<input name="password" type="password" class="form-control" placeholder="Password"
required />
</div>
<div class="card-body">
<form class="form" method="POST" action="login">
<div class="form-group">
<label for="formName"><i class="fa fa-user"></i> Login</label>
<input
id="formName"
name="name"
type="text"
class="form-control"
placeholder="Username"
autofocus
required
/>
</div>

<button name="Login" class="btn btn-primary btn-block">Login</button>
</form>
<hr />
<div class="form-group">
<label for="formPassword"
><i class="fa fa-lock"></i> Password</label
>
<input
name="password"
type="password"
class="form-control"
placeholder="Password"
required
/>
</div>

<div class="text-center">
For advanced documentation, see
<a target="_blank" href="http://flask-monitoringdashboard.readthedocs.io">this site</a>
</div>
</div>
</div>
<button name="Login" class="btn btn-primary btn-block">
Login
</button>
</form>
<hr />
{% if show_login_footer %}
<div class="text-center">
For advanced documentation, see
<a
target="_blank"
href="http://flask-monitoringdashboard.readthedocs.io"
>this site</a
>
</div>
{% endif %}
</div>
</div>
</div>
</div>
</div>
</body>
{% endblock %}
{% endblock %}
7 changes: 6 additions & 1 deletion flask_monitoringdashboard/views/__init__.py
Original file line number Diff line number Diff line change
Expand Up @@ -23,4 +23,9 @@ def static(filename):
@blueprint.route('/<path:path>') # Catch-All URL: http://flask.pocoo.org/snippets/57/
@secure
def index(path):
return render_template('fmd_base.html', blueprint_name=config.blueprint_name)
return render_template('fmd_base.html',
blueprint_name=config.blueprint_name,
brand_name=config.brand_name,
title_name=config.title_name,
description=config.description,
)
6 changes: 5 additions & 1 deletion flask_monitoringdashboard/views/auth.py
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,11 @@ def login():
if user is not None:
on_login(user=user)
return redirect(url_for(MAIN_PAGE))
return render_template('fmd_login.html', blueprint_name=config.blueprint_name)
return render_template('fmd_login.html',
blueprint_name=config.blueprint_name,
show_login_banner=config.show_login_banner,
show_login_footer=config.show_login_footer,
)


@blueprint.route('/logout')
Expand Down

0 comments on commit b83fb3b

Please sign in to comment.